<template>
    <div>
        <div class="page-title">添加委员</div>
        <el-form ref="form" :model="form" label-width="100px">
            <el-form-item label="委员分类.">
                <el-radio v-model="form.type" label="1">党委</el-radio>
                <el-radio v-model="form.type" label="2">居委</el-radio>
            </el-form-item>

            <el-form-item label="委员姓名.">
                <el-input ref="name" v-model="form.name" placeholder="请输入委员姓名"></el-input>
            </el-form-item>

            <el-form-item label="封面照片.">
                <el-upload :action="uploadImage" :show-file-list="false" :before-upload="beforeUpload"
                    :on-success="uploadSuccess">
                    <div v-if="photo" class="relative">
                        <img :src="photo" class="photo">
                        <el-button class="reupload" icon="el-icon-refresh" size="mini">重新上传</el-button>
                    </div>
                    <i v-else class="el-icon-plus"></i>
                    <template #tip>
                        <div class="el-upload__tip">
                            只能上传 PNG / JPG / GIF / BMP / WEBP 文件，且不超过 2MB，建议尺寸 350 * 350
                        </div>
                    </template>
                </el-upload>
            </el-form-item>

            <el-form-item label="委员职位.">
                <el-input ref="position" v-model="form.position" placeholder="请输入委员职位"></el-input>
            </el-form-item>

            <el-form-item label="委员学历.">
                <el-input ref="education" v-model="form.education" placeholder="请输入委员学历"></el-input>
            </el-form-item>

            <el-form-item label="委员职责.">
                <el-input ref="duty" v-model="form.duty" placeholder="请输入委员职责"></el-input>
            </el-form-item>

            <el-form-item label="联系方式.">
                <el-input ref="tel" v-model="form.tel" placeholder="请输入联系方式"></el-input>
            </el-form-item>

            <el-form-item label="委员排序.">
                <el-input ref="sort" v-model="form.sort" placeholder="请输入委员排序，（ 非必填，默认为0 ）"></el-input>
            </el-form-item>

            <el-form-item label="委员状态.">
                <el-switch v-model="form.status" active-color="#f8c15c"></el-switch>
            </el-form-item>

            <el-form-item>
                <el-button type="success" icon="el-icon-check" @click="submit">添加</el-button>
                <el-button icon="el-icon-close" @click="cancel">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import {
        post
    } from '@/network/request'
    import {
        __URL__
    } from '@/main'

    export default {
        name: 'AddOffice',
        data() {
            return {
                uploadImage: __URL__ + '/uploadImage', // 上传图片地址
                form: {
                    cid: sessionStorage.getItem('cid'),
                    type: '1',
                    name: '',
                    photo: '',
                    position: '',
                    education: '',
                    duty: '',
                    tel: '',
                    sort: '',
                    status: false
                },
                photo: ''
            }
        },
        mounted() {
            this.form.status = true
        },
        methods: {
            // 上传准备
            beforeUpload(file) {
                if (['image/png', 'image/jpeg', 'image/gif', 'image/bmp', 'image/webp'].indexOf(file
                        .type) == -1) {
                    this.$message.error({
                        message: '请上传正确的图片格式！',
                        type: 'error',
                        offset: 70
                    })
                    return false
                }

                const size = file.size / 1024 / 1024 < 2
                if (!size) {
                    this.$message.error({
                        message: '图片大小不能超过 2MB！',
                        type: 'error',
                        offset: 70
                    })
                    return false
                }
            },
            // 上传成功
            uploadSuccess(res, file) {
                this.form.photo = res.data
                this.photo = URL.createObjectURL(file.raw)
            },
            // 提交
            submit() {
                if (this.form.name == '') {
                    this.$notify.info({
                        title: '系统提示',
                        message: '请输入委员姓名',
                        offset: 70
                    })
                    this.$refs['name'].focus()
                    return false
                }

                if (this.form.photo == '') {
                    this.$notify.info({
                        title: '系统提示',
                        message: '请上传封面照片',
                        offset: 70
                    })
                    return false
                }

                if (this.form.position == '') {
                    this.$notify.info({
                        title: '系统提示',
                        message: '请输入委员职位',
                        offset: 70
                    })
                    this.$refs['position'].focus()
                    return false
                }

                if (this.form.education == '') {
                    this.$notify.info({
                        title: '系统提示',
                        message: '请输入委员学历',
                        offset: 70
                    })
                    this.$refs['education'].focus()
                    return false
                }

                if (this.form.duty == '') {
                    this.$notify.info({
                        title: '系统提示',
                        message: '请输入委员职责',
                        offset: 70
                    })
                    this.$refs['duty'].focus()
                    return false
                }

                if (this.form.tel == '') {
                    this.$notify.info({
                        title: '系统提示',
                        message: '请输入联系电话',
                        offset: 70
                    })
                    this.$refs['tel'].focus()
                    return false
                }

                post('/addOffice', this.form).then(res => {
                    const result = res.data
                    if (result.code == 200) {
                        this.$notify.success({
                            title: '系统提示',
                            message: '委员添加成功',
                            offset: 70
                        })
                        this.$router.push('/office')
                    }
                }).catch()
            },
            // 取消
            cancel() {
                this.$router.push('/office')
            }
        }
    }
</script>

<style>
</style>